<template>
    <div>
        <h2>优惠卷列表</h2>
        <div>
            <span>代金卷标题</span>
            <input type="text" v-model="model.Title" />

            <span>适用门店</span>
            <select v-model="model.ShopId">
                <option value="-1">请选择</option>
                <option v-for="item in shopList" :key="item.Id" :value="item.Id">{{ item.ShopName }}</option>
            </select>
            <input type="button" value="查询" class="btn btn-success" @click="GetDisList" />
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>卷类型</td>
                    <td>代金卷标题</td>
                    <td>代金卷副标题</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>每人限领</td>
                    <td>使用条件</td>
                    <td>减免金额</td>
                    <td>有效期</td>
                    <td>适合业务</td>
                    <td>使用须知</td>
                    <td>适用门店</td>
                    <td>联系方式</td>
                    <td>操作</td>
                </tr>



                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.DisCountType }}</td>
                    <td>{{ item.Title }}</td>
                    <td>{{ item.Titles }}</td>
                    <td> <img :src="item.Photo" width="100" height="100" /></td>
                    <td>{{ item.Number }}</td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.Num }}</td>
                    <td>{{ item.Money }}</td>
                    <td>{{ item.CreateTime.substr(0, 10) }}到{{ item.UpdateTime.substr(0, 10) }}</td>
                    <td>{{ item.YeWu }}</td>
                    <td>{{ item.XuZhi }}</td>
                    <td>
                        <span v-if="item.ShopId == 1">河北石家庄</span>
                        <span v-if="item.ShopId == 2">广州白云山</span>
                        <span v-if="item.ShopId == 3">上海奉贤区</span>
                        <span v-if="item.ShopId == 4">北京上帝区</span>
                        <span v-if="item.ShopId == 5">北京温泉区</span>
                        <span v-if="item.ShopId == 6">北京顺义店</span>
                    </td>
                    <td>{{ item.Phone.substr(0, 3) }}****{{ item.Phone.substr(7, 11) }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger"   @click="editdel(item.Id)"  />
                        <input type="button" value="编辑" class="btn btn-info"   @click="countUpd(item.Id)"  />
                    </td>
                </tr>
            </tbody>
        </table>
        <span>总页数:{{ data.count }}条</span>
        <span>每页:{{ model.size }}条</span>
        <span>当前页:{{ model.index + '/' + data.page }}页</span>
        <div>
            <input type="button" value="首页" class="btn btn-primary" @click="getpage('a')" />
            <input type="button" value="上一页" class="btn btn-primary" @click="getpage('b')" />
            <input type="button" value="下一页" class="btn btn-primary" @click="getpage('c')" />
            <input type="button" value="尾页" class="btn btn-primary" @click="getpage('d')" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()


//门店列表
const shopList: any = ref([])
onMounted(() => {
    GetList();//门店列表
    GetDisList();//优惠卷列表
})



let model = reactive({

    Title: '',
    ShopId: -1,
    index: 1,
    size: 2,
})


let data: any = reactive({
    list: [],
    count: 0,
    page: 0,

})


//请求优惠列表
const GetDisList = () => {
    //请求优惠列表

    axios({
        url: 'https://localhost:7059/api/DisCount/DisCountList',
        method: 'get',
        params: model,
    })
        .then((res) => {
            console.log(res)
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;

        })
        .catch((err) => {
            console.log(err)
        })



}


//编辑
const countUpd=(Id:any)=>{
router.push({
    path:'/DisCountUpd',
    query:{
        Id:Id,
    }
})


} 



//删除
//删除
const editdel=(Id:any)=>{
    
    var f=confirm('确定要删除吗？');
   if(f){
    
    axios({
    url:'https://localhost:7059/api/DisCount/DisCountDel',
    method:'delete',
    params:{Id:Id},
    })
    
    .then((res)=>{
        console.log(res);
          if(res.data>0){
            alert('删除成功');
            GetList();
          }
          else{
            alert('删除失败');
          }
    })
    .catch((ree)=>{
        console.log(ree);   
    })


   }

    
    
}    
//分页
const getpage = (str: any) => {

    switch (str) {
        case 'a':
            if (model.index == 1) {
                return;
            }

            model.index = 1;
            break;

            case 'b':
            if (model.index == 1) {
                return;
            }
            model.index --;
            break;



            case 'c':
            if (model.index == data.page) {
                return;
            }
            model.index ++;
            break;


            case 'd':
            if (model.index == data.page) {
                return;
            }
            model.index =data.page
            break;
    }



    GetDisList();//优惠卷列表

}



const GetList = () => {
    //请求门店列表
    axios({

        url: 'https://localhost:7059/api/DisCount/ShopList',
        method: 'get',
    })
        .then((res) => {
            console.log(res)
            shopList.value = res.data;
        })
        .catch((err) => {
            console.log(err)
        })


}









</script>

<style scoped></style>